<template>
	<!-- 编辑弹出框 -->
	<el-dialog :title="dialogTitle" v-model="dialogVisible" align-center width="90%" top="5vh">
		<el-form ref="theFormRef" :model="dataForm" label-width="80px">
			<el-row>
				<el-col :span="6">
					<el-form-item label="ID"><el-input v-model="dataForm.id" disabled></el-input></el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="分类">
						<el-select v-model="dataForm.categoryId" placeholder="选择分类">
							<el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="价格"><el-input v-model="dataForm.price" /></el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="商品名"><el-input v-model="dataForm.name"></el-input></el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商品规格"><el-input v-model="dataForm.spec"></el-input></el-form-item>
				</el-col>
			</el-row>

			<el-form-item label="销售亮点"><el-input v-model="dataForm.sellPoint"></el-input></el-form-item>

			<el-row>
				<el-col :span="18">
					<el-form-item label="轮播图列"><el-input v-model="albums"></el-input></el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="12">
					<el-form-item label="上架时间">
						<el-date-picker v-model="dataForm.createTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" value-format="string" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="数量"><el-input v-model="dataForm.count" /></el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="状态">
						<el-switch v-model="dataForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0"></el-switch>
					</el-form-item>
				</el-col>
				<el-col :span="6"></el-col>
			</el-row>
			<el-form-item label="商品详情">
				<!-- 使用富文本组件 -->
				<editor v-model="dataForm.content" ></editor>
			</el-form-item>
		</el-form>
		<!-- 底部按钮 -->
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="handleSubmit">确定</el-button>
			</span>
		</template>		
	</el-dialog>
</template>

<script setup>
import * as GoodsAPI from '@/api/goods.js';
import Editor from '@/components/wangEditor/index.vue'; //导入封装后的富文本组件
import dayjs from 'dayjs';
import { ref, reactive, computed, nextTick } from 'vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
	categoryId: {
		type: Number,
		default: 0
	},
	categoryList: Array //分类选项数据
});

const albums = ref('');
//数据校验规则，后续继续完善
const rules = reactive({});

//弹框标题
const dialogTitle = computed(() => {
	return !dataForm.value.id ? '新增' : '编辑';
});

const dialogVisible = ref(false);
const dataForm = ref({
	id: 0
});
const theFormRef = ref(null);
const init = async (id) => {
	dataForm.value.id = id || 0;
	dialogVisible.value = true;
	await nextTick();	
	theFormRef.value.resetFields();
	if (id) {
		//是编辑
		let result = await GoodsAPI.getDetailById(id);
		dataForm.value = result.data; //返回数据结构详见API文档
		albums.value = dataForm.value.album ? dataForm.value.album.toString():"";
	} else {
		//是新增
		setDataFormToDefault();
	}
};

const emit = defineEmits(['refreshDataList']);
// 确认提交
const handleSubmit = () => {
	let valid = theFormRef.value.validate(async valid=>{
		if (valid) {
			dataForm.value.album = albums.value.split(',');
			await GoodsAPI.save(dataForm.value);		
			ElMessage.success(`保存成功`); 
			dialogVisible.value = false;
			emit('refreshDataList'); //重新刷新列表数据
		}
	});
};

const setDataFormToDefault = () => {
	//初始默认值
	let defaultForm = {};
	defaultForm.id = 0;
	defaultForm.categoryId = props.categoryId; //Props传递的参数
	defaultForm.name = '';
	defaultForm.spec = '';
	defaultForm.sellPoint = '';
	defaultForm.price = 0;
	defaultForm.count = 0;
	defaultForm.img = '';
	defaultForm.album = '';
	defaultForm.content = '';
	defaultForm.status = 0;
	defaultForm.createTime = dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss');
	defaultForm.remark = '';
	dataForm.value = Object.assign({}, defaultForm);
};

//暴露接口方法
defineExpose({
	init
});
</script>

<style scoped></style>
